<!-- 数据字典 Select 选择器 -->
<template>
  <div class="flex">
    <el-cascader :options="options" />
    <el-button type="primary" @click="handleOpenDialog" class="ml-10px">设置展示数据</el-button>
    <LinkOptionDialog ref="dialogRef" @change="handleLinkOptionSelected" />
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'LinkOptionSelect' })
import LinkOptionDialog from './LinkOptionDialog.vue'
import { cloneDeep } from 'lodash-es'

const options = ref([])
// 选择对话框
const dialogRef = ref()
const props = defineProps({
  formCreateInject: Object,
  modelValue: {
    type: [Array, String, Number, Boolean, Object],
    default: () => []
  },
  type: String
})
options.value = cloneDeep(props.modelValue)

// 处理打开对话框
const handleOpenDialog = () => dialogRef.value?.open(options.value)
const handleLinkOptionSelected = (linkOption) => {
  options.value = linkOption
  console.log(options.value)
  emit('change', options.value)
}
const emit = defineEmits(['change'])
</script>
